<template>
  <div class="checkout">
    <h1>结算</h1>
    
    <div class="checkout-container">
      <div class="checkout-form">
        <div class="form-section">
          <h2>收货信息</h2>
          <div class="form-group">
            <label for="name">收货人姓名</label>
            <input type="text" id="name" v-model="formData.name" required>
          </div>
          <div class="form-group">
            <label for="phone">联系电话</label>
            <input type="tel" id="phone" v-model="formData.phone" required>
          </div>
          <div class="form-group">
            <label for="address">详细地址</label>
            <textarea id="address" v-model="formData.address" rows="3" required></textarea>
          </div>
        </div>
        
        <div class="form-section">
          <h2>支付方式</h2>
          <div class="payment-methods">
            <label class="payment-option">
              <input type="radio" v-model="formData.paymentMethod" value="alipay" checked>
              <span>支付宝</span>
            </label>
            <label class="payment-option">
              <input type="radio" v-model="formData.paymentMethod" value="wechat">
              <span>微信支付</span>
            </label>
            <label class="payment-option">
              <input type="radio" v-model="formData.paymentMethod" value="credit">
              <span>信用卡</span>
            </label>
          </div>
        </div>
        
        <div class="form-section">
          <h2>优惠券</h2>
          <div class="coupon-section">
            <input type="text" v-model="couponCode" placeholder="请输入优惠券代码" class="coupon-input">
            <button @click="applyCoupon" class="apply-coupon-btn">应用</button>
          </div>
          <div v-if="appliedCoupon" class="applied-coupon">
            <span>已应用优惠券: <span v-text="appliedCoupon.name"></span> (-¥<span v-text="appliedCoupon.discount"></span>)</span>
            <button @click="removeCoupon" class="remove-coupon-btn">移除</button>
          </div>
        </div>
      </div>
      
      <div class="order-summary">
        <h2>订单摘要</h2>
        <div class="summary-items">
          <div v-for="item in cartItems" :key="item.id" class="summary-item">
            <span><span v-text="item.name"></span> x <span v-text="item.quantity"></span></span>
            <span>¥<span v-text="(item.price * item.quantity).toFixed(2)"></span></span>
          </div>
        </div>
        
        <div class="summary-details">
          <div class="summary-row">
            <span>商品总价:</span>
            <span>¥<span v-text="subtotal.toFixed(2)"></span></span>
          </div>
          <div class="summary-row">
            <span>运费:</span>
            <span v-if="shipping > 0">¥<span v-text="shipping.toFixed(2)"></span></span>
            <span v-else class="free-shipping">免运费</span>
          </div>
          <div class="summary-row">
            <span>优惠:</span>
            <span v-if="discount > 0" class="discount">-¥<span v-text="discount.toFixed(2)"></span></span>
            <span v-else>-</span>
          </div>
          <div class="summary-row total">
            <span>总计:</span>
            <span>¥<span v-text="total.toFixed(2)"></span></span>
          </div>
        </div>
        
        <button @click="placeOrder" class="place-order-btn">提交订单</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { mockCartItems, mockCoupons } from '../utils/mockData.js'

export default {
  name: 'Checkout',
  setup() {
    const router = useRouter()
    
    const formData = ref({
      name: '',
      phone: '',
      address: '',
      paymentMethod: 'alipay'
    })
    
    const couponCode = ref('')
    const appliedCoupon = ref(null)
    
    // 使用模拟购物车数据
    const cartItems = ref(mockCartItems)
    
    const shipping = ref(0) // 运费
    
    // 使用模拟优惠券
    const coupons = mockCoupons
    
    // 计算商品总价
    const subtotal = computed(() => {
      return cartItems.value.reduce((sum, item) => {
        return sum + (item.price * item.quantity)
      }, 0)
    })
    
    // 计算优惠金额
    const discount = computed(() => {
      return appliedCoupon.value ? appliedCoupon.value.discount : 0
    })
    
    // 计算总价
    const total = computed(() => {
      return subtotal.value + shipping.value - discount.value
    })
    
    const applyCoupon = () => {
      if (!couponCode.value) {
        alert('请输入优惠券代码')
        return
      }
      
      const coupon = coupons.find(c => c.code === couponCode.value.toUpperCase())
      if (coupon) {
        appliedCoupon.value = coupon
        alert(`优惠券 ${coupon.name} 应用成功!`)
      } else {
        alert('优惠券代码无效')
      }
    }
    
    const removeCoupon = () => {
      appliedCoupon.value = null
      couponCode.value = ''
    }
    
    const placeOrder = () => {
      if (!formData.value.name || !formData.value.phone || !formData.value.address) {
        alert('请填写完整的收货信息')
        return
      }
      
      // 这里可以添加提交订单的逻辑
      alert('订单提交成功!')
      router.push('/orders')
    }
    
    return {
      formData,
      couponCode,
      appliedCoupon,
      cartItems,
      shipping,
      subtotal,
      discount,
      total,
      applyCoupon,
      removeCoupon,
      placeOrder
    }
  }
}
</script>

<style scoped>
.checkout {
  padding: 2rem 0;
}

.checkout h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.checkout-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.checkout-form {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.form-section {
  margin-bottom: 2rem;
}

.form-section h2 {
  margin-bottom: 1rem;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.payment-option input {
  margin-right: 0.5rem;
}

.coupon-section {
  display: flex;
  gap: 1rem;
}

.coupon-input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.apply-coupon-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.apply-coupon-btn:hover {
  background-color: #359c6d;
}

.applied-coupon {
  margin-top: 1rem;
  padding: 0.8rem;
  background-color: #e8f5e9;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remove-coupon-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.remove-coupon-btn:hover {
  background-color: #d32f2f;
}

.order-summary {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
  height: fit-content;
}

.order-summary h2 {
  margin-bottom: 1rem;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.summary-items {
  margin-bottom: 1.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-details {
  margin-bottom: 1.5rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.total {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-top: 0.5rem;
}

.free-shipping {
  color: #42b983;
  font-weight: bold;
}

.discount {
  color: #e91e63;
  font-weight: bold;
}

.place-order-btn {
  width: 100%;
  background-color: #e91e63;
  color: white;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.place-order-btn:hover {
  background-color: #c2185b;
}

@media (max-width: 768px) {
  .checkout-container {
    grid-template-columns: 1fr;
  }
  
  .coupon-section {
    flex-direction: column;
  }
}
</style>